<template>
  <van-skeleton title
                :row="20"
                style="padding: 50px 10px"
                v-if="!flag" />
  <div class="greyBgr"
       v-else>
    <div class="topTittle"
         v-if="$store.state.isLogin">
      <van-nav-bar title="购物车"
                   left-arrow
                   @click-left="onClickLeft" />
      <p class="addressIcon oneLine">
        <van-icon name="location"
                  color="#ec0d0d"
                  size="25" />
        <span @click="errorTip"
              class="oneLine">{{this.$store.state.mineAddress.address==undefined?'收货地址为空，点击编辑':this.$store.state.mineAddress.address}}</span>
      </p>
    </div>
    <!-- 循环渲染订单 -->
    <SingleOrder v-show="$store.state.isLogin"
                 v-for="(item,index) in this.$store.state.whichCheckd"
                 :key="item.goodsId"
                 :goodsId="item.goodsId"
                 :item="item"
                 :index="index"
                 @deleteShopCard="getDelete"></SingleOrder>
    <!-- 如果删除商品 -->
    <van-loading color="#ec0d0d"
                 size="30px"
                 text-size="25px"
                 v-show="$store.state.isDeleting">删除中...</van-loading>
    <!-- 去结算/提交订单 -->
    <SubmitOrder :flag="false"
                 v-if="$store.state.isLogin"></SubmitOrder>
    <!-- 如果未登录则显示让他去登录 -->
    <van-empty description="对不起，你还没有登录哟~"
               v-if="!$store.state.isLogin"
               image-size="80%">
      <van-button round
                  type="danger"
                  class="bottom-button"
                  to="/accountsign">去登录</van-button>
    </van-empty>
    <van-empty class="custom-image"
               image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
               description="购物车里是空哒"
               v-if="$store.state.isLogin&&($store.state.shopCarList.length==0)&&($store.state.whichCheckd.length==0)" />
  </div>
</template>

<script>
import { getBuyCarList } from '../../api/api'
import SingleOrder from './SingleOrder'
import SubmitOrder from './SubmitOrder'
export default {
  name: 'ShopCarIndex',
  components: {
    SingleOrder,
    SubmitOrder,
  },
  data() {
    return {
      flag: false,
    }
  },
  created() {
    // AccounsSign()
    this.init()
    if (JSON.parse(localStorage.getItem('addressList')) && JSON.parse(localStorage.getItem('addressList')).length != 0) {
      let list = JSON.parse(localStorage.getItem('addressList'))
      list.forEach((val) => {
        if (val.isDefault) {
          this.$store.state.mineAddress = val
        }
      })
    }
    // console.log(this.$store.state.mineAddress.address);
    if (this.$store.state.mineAddress.address == undefined) {
      this.$store.state.cannotSubmit = true
      if (this.$store.state.isLogin) {
        this.$toast.warning('收货地址为空，请创建收货地址')
      }
    } else {
      this.$store.state.cannotSubmit = false
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    errorTip() {
      this.$router.push('/mineAddress')
    },
    getDelete() {
      this.init()
    },
    init() {
      // 获取商品列表
      getBuyCarList().then(res => {
        let arr = [];
        this.$store.state.whichCheckd = []
        this.$store.state.checkedAllPrice = 0
        this.$store.state.checkedNum = 0
        if (res.data.code == 403) {
          this.$store.commit('loginFalse')
        } else {
          this.$store.commit('loginTrue')
          this.$store.commit('getShopCar', res.data.list)
          console.log(res.data.list);
          if (res.data.list.length != 0) {
            for (let value of res.data.list) {
              let obj = {
                imgUrl: value.coverImg,
                goodsId: value.goodsId,
                shopId: value.shoppingCartId,
                price: value.price,
                num: value.num,
                name: value.goodsName,
                checked: false
              }
              if (JSON.parse(localStorage.getItem('lastShopCarList')) != null && JSON.parse(localStorage.getItem('lastShopCarList')).whichCheckd.length != 0) {
                arr = JSON.parse(localStorage.getItem('lastShopCarList')).whichCheckd
                for (let i = 0; i < arr.length; i++) {
                  if (value.goodsId == arr[i].goodsId) {
                    obj.checked = arr[i].checked
                  }
                }
              }
              if (obj.checked) {
                this.$store.state.checkedAllPrice += obj.price * obj.num
                this.$store.state.checkedNum++
              }
              this.$store.commit('pushCheckedList', obj)
            }
          }
        }
        if (this.$store.state.checkedNum == 0) {
          this.$store.state.allCheck = false
        }
        localStorage.setItem('lastShopCarList', JSON.stringify({ whichCheckd: this.$store.state.whichCheckd }))
        this.flag = true
      })
    }
  },
}
</script>

<style lang='less' scoped>
/deep/.van-loading {
  position: fixed;
  top: 45%;
  width: 100%;
  text-align: center;
  z-index: 333;
}
/deep/.custom-image .van-empty__image {
  width: 200px;
  height: 100%;
}
/deep/.van-empty {
  position: fixed;
  top: 20%;
  width: 100%;
}
.greyBgr {
  height: 100%;
  min-height: calc(100vh - 110px);
  background-color: #f0f0f0;
  padding-bottom: 110px;
}
.topTittle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  background-color: white;
  .van-hairline--bottom::after {
    border: none;
  }
  .van-nav-bar {
    width: 100%;
    /deep/.van-nav-bar__title {
      font-weight: 600;
      font-size: 18px;
    }
  }
  .addressIcon {
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
    }
  }
}
/deep/.van-empty__bottom {
  width: 60%;
}
.bottom-button {
  width: 100%;
  height: 40px;
}
/deep/.van-empty__description {
  font-size: 20px;
}
</style>